<template>
	<gui-page :refresh="true" @reload="reload" :loadmore="true" @loadmorefun="loadData"
		:apiLoadingStatus="apiLoadingStatus" ref="guipage">
		<template v-slot:gFixedTop>
			<gui-a-header :title="headerTitle"></gui-a-header>
			<view class="bgfff">
				<view class="search flex-ac-jb">
					<view class="flex1">
						<gui-search2 :customClass="['bgfff','border']" height="53rpx" placeholder="输入关键字，搜索您想要的"
							placeholderClass="plStyle" :kwd="query.postName" @confirm="confirm" @clear="clear"
							@inputting="inputting"></gui-search2>
					</view>
					<button class="saveBtn" @click="showScreen">筛选</button>
				</view>
				<view class="shai flex-ac-row f20">
					<text class="la">已选条件:</text>
					<text class="la c999" v-if="queryShow.length <= 0">请选择</text>
					<scroll-view :scroll-x="true" class="gui-flex1" style="overflow: hidden;">
						<view class="row gui-flex">
							<view class="label-item no-wrap colorBlue" v-for="(item,index) in queryShow"
								:key="item.dictValue">{{item.dictLabel}}</view>
						</view>
					</scroll-view>
					<view class="tool colorRed flex-ac-row" @tap="clearCheck">
						<text class="tool-text">清除</text>
						<text class="tool-text">重新筛选</text>
					</view>

				</view>
			</view>
		</template>
		<template v-slot:gBody>
			<view class="pos">
				<ScreenPostCom v-if="screenComShow" @change="queryChange" @confirm="confirmQuery"
					:mainHeight="mainHeight" ref="ScreenPostComRef">
				</ScreenPostCom>
			</view>
			<view class="list bgfff">
				<view class="post-list">
					<gui-empty v-if="noData">
						<template v-slot:img>
							<view class="gui-flex gui-rows gui-justify-content-center">
								<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png"
									mode="widthFix">
								</image>
							</view>
						</template>
						<template v-slot:text>
							<text
								class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
							<view style="height: 200rpx;"></view>
						</template>
					</gui-empty>
					<view class="item" v-for="(item,index) in dataList" :key="item.id"
						@click="$u.to(`/pages/post/postDetail?id=${item.id}`)">
						<view class="flex-ac-jb">
							<text class="title">{{item.postName}}</text>
							<text class="pay f24 colorRed">{{item.postMoney}}</text>
						</view>
						<view class="info flex-ac f22">
							<text>{{item.addressInfo}} {{item.work}} {{item.education}} 招{{item.recruitNum}}人</text>
						</view>
						<view class="flex-ac-row f18" v-if="item.comUsertConpanyInfo.welfareTreatment">
							<view class="post-label c999"
								v-for="(wItem,wIndex) in item.comUsertConpanyInfo.welfareTreatment.split(',')"
								:key="wIndex">{{wItem}}</view>
						</view>
						<view class="company flex-ac-jb">
							<view class="left flex-ac">
								<image class="qiye-icon" src="../../static/index/qiye.png" mode="widthFix"
									style="height: auto;"></image>
								<text class="c666 f24">{{item.comUsertConpanyInfo.companyName}}</text>
							</view>
							<text class="c999 f20">信息来源：徐州市本级</text>
						</view>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		selectUserInfoPostListPage,
		selectUserPostAllPage
	} from '@/api/user.js'
	import graceJS from "@/Grace6/js/grace.js"
	import ScreenPostCom from "@/components/Screen-post-com/Screen-post-com.vue"
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const store = useUserStore()
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user.js'
	const {
		addressInfo
	} = storeToRefs(store)
	
	const guipage = ref(null);
	const ScreenPostComRef = ref(null)
	const mainHeight = ref(200);
	const $u = reactive(inject('$u'))
	const headerTitle = ref('职位列表')
	const queryType = ref('hot');
	// 筛选条件回显
	const queryShow = ref([])
	const queryData = ref({
		workArea: '', //城市
		industry: '', // 行业
		postMoney: '', //薪资
		age: '', //年龄
		work: '', //工作经验
		physicalContext: '', //残疾等级
		welfareContext: '' //残疾部位
	})
	const screenComShow = ref(false)
	const queryChange = (data) => {
		queryShow.value = data.value;
	}

	const showScreen = () => {
		ScreenPostComRef.value.open()
	}

	const confirmQuery = () => {
		let workArea = [];
		let industry = [];
		let postMoney = [];
		let age = [];
		let work = [];
		let physicalContext = [];
		let welfareContext = [];

		queryShow.value.forEach(item => {
			if (item.key == 'workArea') {
				workArea.push(item.dictValue)
			}
			if (item.key == 'industry') {
				industry.push(item.dictValue)
			}
			if (item.key == 'postMoney') {
				postMoney.push(item.dictValue)
			}
			if (item.key == 'age') {
				age.push(item.dictValue)
			}
			if (item.key == 'work') {
				work.push(item.dictValue)
			}
			if (item.key == 'physicalContext') {
				physicalContext.push(item.dictValue)
			}
			if (item.key == 'welfareContext') {
				welfareContext.push(item.dictValue)
			}
		})

		queryData.value.workArea = workArea.join(',') // 城市
		queryData.value.industry = industry.join(',') // 行业
		queryData.value.postMoney = postMoney.join(',') // 薪资
		queryData.value.age = age.join(',') // 年龄
		queryData.value.work = work.join(',') // 工作经验
		queryData.value.physicalContext = physicalContext.join(',') // 残疾等级
		queryData.value.welfareContext = welfareContext.join(',') // 残疾部位
		reload();
	}

	const reload = (isRelad = true) => {
		query.value.pageNum = 1;
		loadData(isRelad)
	}

	onLoad((option) => {
		// 01. 获取页面主体高度
		setTimeout(() => {
			graceJS.getRefs(guipage, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					mainHeight.value = (e.height - uni.upx2px(10));
					screenComShow.value = true;
				});
			});
		}, 500)
		if(option.type) {
			console.log(option.type);
			if(option.type == 'hot') {
				headerTitle.value = "热门招聘"
			}else if(option.type == 'area') {
				headerTitle.value = "附近招聘"
				if (addressInfo.value.district) {
					queryData.value.workArea = addressInfo.value.district
					queryShow.value.push({
						dictLabel: addressInfo.value.district,
						key: "workArea",
					})
					setTimeout(() => {
						ScreenPostComRef.value.checkFun({
							dictLabel: addressInfo.value.district,
							key: "workArea",
						});
					}, 600)
				}else {
					$u.msg('未获取到当前位置')
				}
			}
			queryType.value = option.type;
		}
		loadData();
	})

	const query = ref({
		pageNum: 1,
		pageSize: 10,
		postName: ''
	})

	const inputting = (e) => {
		query.value.postName = e;
	}
	const confirm = (e) => {
		console.log(e);
		query.value.postName = e;
		reload(false);
	}
	const clear = (e) => {
		query.value.postName = '';
		reload(false);
	}

	const noData = ref(false);
	const dataList = ref([])

	const loadData = (isReload) => {
		let queryParam = Object.assign(query.value, {})
		let otherQueryParam = Object.assign(queryData.value, {})
		const request = (queryType.value == 'hot') ? selectUserInfoPostListPage : selectUserPostAllPage;
		request({
			...queryParam,
			...otherQueryParam
		}).then(res => {
			if (res.code == 200) {
				var resultArr = res.rows;
				let total = Math.ceil(res.total / queryParam.pageSize);
				if (queryParam.pageNum >= 2) {
					dataList.value = dataList.value.concat(resultArr);
					guipage.value.stoploadmore();
					if (queryParam.pageNum >= total) {
						guipage.value.nomore();
					}
				}
				else {
					dataList.value = [];
					dataList.value = resultArr;
					// 刷新
					if (isReload) {
						guipage.value.endReload();
					} else {
						guipage.value.stoploadmore();
					}
					(resultArr.length <= 0) ? noData.value = true: noData.value = false;
				}
				query.value.pageNum++;
			}
		})
	}
	
	// 清除筛选
	const clearCheck = () => {
		ScreenPostComRef.value.clearCheck();
		queryData.value.workArea = '' // 城市
		queryData.value.industry = '' // 行业
		queryData.value.postMoney = '' // 薪资
		queryData.value.age = '' // 年龄
		queryData.value.work = '' // 工作经验
		queryData.value.physicalContext = '' // 残疾等级
		queryData.value.welfareContext = '' // 残疾部位
		reload();
	}
</script>

<style lang="scss">
	.search {
		padding: 28rpx 14rpx 24rpx 36rpx;

		.border {
			border: 1px solid #ccc;
		}

		.saveBtn {
			width: 97rpx;
			height: 53rpx;
			margin-left: 10rpx;
			font-size: 20rpx;
		}
	}

	.shai {
		padding: 20rpx 10rpx 14rpx 36rpx;

		.la {
			position: relative;
			top: -4rpx;
		}

		.label-item {
			padding: 6rpx 14rpx;
			background: #F5F5F5;
			border-radius: 14rpx;
			margin-left: 10rpx;
			margin-bottom: 10rpx;
		}

		.tool {
			position: relative;
			top: -4rpx;

			.tool-text {
				position: relative;
				padding: 6rpx 15rpx;

				&:last-child::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 1px;
					height: 24rpx;
					background: #D50000;
				}
			}
		}
	}

	.list {
		padding: 0 36rpx;
		margin-top: 10rpx;
	}
</style>